﻿<head>
	<script src="~/lib/vue/dist/vue.global.js"></script>
	<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
	<script src="~/lib/element-plus/dist/index.full.js"></script>
	<script src="~/lib/axios/dist/axios.js"></script>
</head> 

 <div id="app">
	<table width="100%">
		<tr>
			<td align="right">
				<el-button v-on:click="tj">添加</el-button>
			</td>
		</tr>
	</table>
	<el-table :data="tableData">
		<el-table-column prop="major_kind_id" label="职位分类编号"></el-table-column>
		<el-table-column prop="major_kind_name" label="职位分类名称"></el-table-column>
		<el-table-column prop="major_id" label="职位编号"></el-table-column>
		<el-table-column prop="major_name" label="职称名称"></el-table-column>
		<el-table-column label="删除">
			<template #default="scope">
				<el-button v-on:click="handleEdit(scope.row.mak_id)" type="text">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog v-model="dialogVisibleAdd"
			   title="添加"
			   width="800">
		<span>
			<el-form :rules="rules" :model="from" label-width="auto" style="max-width: 750px">
				<el-form-item label="职位分类编号" prop="major_kind_id">
					<el-select v-model="from.major_kind_id" placeholder="请选择职位分类编号...">
						<el-option v-for="itmeA in options"
								   :key="itmeA.major_kind_id"
								   :label="itmeA.major_kind_id"
								   :value="itmeA.major_kind_id"
								   v-on:click="Level()" />
					</el-select>
				</el-form-item>

				<el-form-item label="职位分类名称" prop="major_kind_name">
					<el-select v-model="from.major_kind_name" placeholder="请选择职位分类名称...">
						<el-option v-model="xiaLa"
								   v-for="itmeB in options2"
								   :key="itmeB.major_kind_id"
								   :label="itmeB.major_kind_name"
								   :value="itmeB.major_kind_name" />
					</el-select>
				</el-form-item>
				<el-form-item label="职分类位编号" prop="major_id">
					<el-input v-model="from.major_id" />
				</el-form-item>
				<el-form-item label="职分类位名称" prop="major_name">
					<el-input v-model="from.major_name" />
				</el-form-item>
				<el-form-item>
					<el-button v-on:click="dialogVisibleAdd = false">取消</el-button>
					<el-button type="primary" v-on:click="AddOk()">
						变更
					</el-button>
				</el-form-item>
			</el-form>

		</span>

	</el-dialog>
</div>
<script>
	var { createApp, reactive, ref } = Vue
	var app = createApp({
		setup() {
			let tableData = ref([])

			//查询
			function Fill() {
				axios.post('/GetCM')
					.then(res => {
						tableData.value = res.data;
					})
			}
			Fill();
			// 填充职位分类数据
			axios.post('/GetCMK')
				.then(function (response) {
					//console.log(response.data);
					options.value = response.data;
				});

			const options = ref([]);
			let options2 = ref([]);
			let xiaLa = ref(false);

			const Level = () => {

				let cmkId = from.major_kind_id;
				xiaLa.value = true;

				axios.get(`/CMK/WenId?id=${cmkId}`)
					.then(function (response) {
						options2.value = response.data;
					});
			};


			//删除
			function handleEdit(mak_id) {
				if (confirm("确定要删除吗？")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/DeleteCM', { id: mak_id }).then(res => {
						if (res.data) {
							Fill();
							alert("成功");
						}
					}).catch(err => {
						console.log(err);
					})
				}
			}
			//添加
			let dialogVisibleAdd = ref(false);
			let from = reactive({
				major_kind_id: "",
				major_kind_name: "",
				major_id: "",
				major_name: ""
			})
			const rules = {
				major_kind_id: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				],
				major_kind_name: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				],
				major_id: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				],
				major_name: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				]
				// 其他字段的验证规则...
			};
			function tj() {
				dialogVisibleAdd.value = true;
			}
			function AddOk() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/AddCM', {
					major_kind_id: from.major_kind_id,
					major_kind_name: from.major_kind_name,
					major_id: from.major_id,
					major_name: from.major_name
				}).then(res => {
					if (res.data) {
						Fill();
						alert("成功");
						from.major_kind_id = "";
						from.major_kind_name = "";
						from.major_id = "";
						from.major_name = "";
						dialogVisibleAdd.value = false;
					}
				}).catch(err => {
					console.log(err);
				})
			}
			return {
				tableData,
				handleEdit,
				dialogVisibleAdd,
				from,
				rules,
				AddOk,
				tj,
				options,
				options2,
				xiaLa,
				Level

			}
		}
	})
	app.use(ElementPlus)
	app.mount("#app");
</script>
<style>
	body {
		background-color: #FFFFBB;
		
		font-family: "Microsoft YaHei", sans-serif;
	}

	el-table {
		background-color: #FFFFBB;
	}
</style>